import React from 'react'
import {Space, Tag } from 'antd';
import Item from 'antd/es/list/Item';
interface coloms{
  id:string;
  title:string;
  imgurl:string;
  text:string;
  labelArr:[
    {
      name:string,
      color?:string
    }
  ]
}
interface ServiceCartType{
  coloms:coloms;
  key?:any,
  click?:any
}

export default function ServiceCart(props:ServiceCartType) {
  const {coloms,click} = props
  const mclick=(id:any)=>{
    click(id)
  }
  return (
    <div onClick={()=>mclick(coloms.id)}  style={{padding:'20px 35px',marginRight:'10px',width:'400px',borderRadius:'10px',background:'#fff',boxShadow:'rgba(149, 157, 165, 0.2) 0 8px 24px',display:'flex',alignItems:'center',margin:'10px 0'}}>
       <div style={{width:'130px',height:'100px',borderRadius:'7px',overflow:'hidden'}}>
          <img src={coloms.imgurl} alt="图片"  style={{width:'100%',height:'100%'}}/>
       </div>
       <div style={{marginLeft:'20px'}}>
          <h4>{coloms.title}</h4>
          <p style={{color:'#CCCCCC',fontSize:'12px',margin:'18px 0 13px 0'}}>服务对象：{coloms.text}</p>
          <div>
            <Space size={[0, 'small']} wrap>
              {coloms.labelArr.map((item:any,index:number)=>{
                return <Tag bordered={false} color={item.color||'magenta'} key={index}>
                            {item.name}
                        </Tag>
              })}
              
            </Space>
          </div>
       </div>
    </div>
  )
}
